<!--
 * @Author: your name
 * @Date: 2020-04-26 08:41:30
 * @LastEditTime: 2020-04-26 22:39:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \My-JavaScript-Study\React Study\day07\01.html
 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="../react.development.js"></script>
    <script src="../react-dom.development.js"></script>
    <script src="../babel.js"></script>
    <script src="../common.js"></script>
  </head>
  <body>
    <script type="text/babel">

    `
      Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。
      它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

      这种功能以前是使用 XMLHttpRequest 实现的。
      Fetch 提供了一个更理想的替代方案，可以很容易地被其他技术使用，例如  Service Workers。
      Fetch 还提供了专门的逻辑空间来定义其他与 HTTP 相关的概念，例如 CORS 和 HTTP 的扩展。

      请注意，fetch 规范与 jQuery.ajax() 主要有三种方式的不同：

        当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject，
        即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve 
        （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
        fetch() 不会接受跨域 cookies；你也不能使用 fetch() 建立起跨域会话。
        其他网站的 Set-Cookie 头部字段将会被无视。
        fetch 不会发送 cookies。
        除非你使用了credentials 的初始化选项。
        （自 2017 年 8 月 25 日以后，默认的 credentials 政策变更为 same-origin。Firefox 也在 61.0b13 版本中进行了修改）
    
    `
      class Demo extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            result: [],
          };
        }

        componentDidMount() {
          fetch("https://api.apiopen.top/getJoke?page=1&count=&type=video")
            `
              这里我们通过网络获取一个 JSON 文件并将其打印到控制台。
              最简单的用法是只提供一个参数用来指明想 fetch() 到的资源路径，
              然后返回一个包含响应结果的promise（一个 Response 对象）。

              当然它只是一个 HTTP 响应，而不是真的JSON。
              为了获取JSON的内容，我们需要使用 json() 方法（在 Body mixin 中定义，被 Request 和 Response 对象实现）。
            `
            .then((res) => res.json())
            .then((res) => {
              this.setState({
                result: res.result,
              });
            })
            .catch(e=>console.log("数据加载失败："+ e));
        }

        render() {
          let result = this.state.result;
          return (
            <div>
              {result.map((ele) => (
                <ul key={ele.sid}>
                  <li>{ele.name}</li>
                  <li>{ele.text}</li>
                  <li>{ele.thumbnail}</li>
                </ul>
              ))}
            </div>
          );
        }
      }

      let c = new Common();
      ReactDOM.render(<Demo />, c.create());
    </script>
  </body>
</html>
